import React from 'react';
import {
	StyleSheet, Text, View, TouchableOpacity, Image, Modal
} from "react-native";
import { GLOBAL } from '../../../config/global';

const scale = GLOBAL.SCALE;
const optionPicSourse = require('../../../imgs/global/option.png');
const selectedPicSourse = require('../../../imgs/global/success.png');

/**
 * 
 * @param {Object} props text
 */
export function Lable (props) {
	const { text } = props;
	return (
		<View style={styles.lableCell}>
			<Text style={styles.lableText}>{text}</Text>
		</View>
	);
}

/**checkObj.dictKey
 * data:[{dictName:'',dictKey:'',index:0}]
 * @param {Object} props data, checkObj, onPress, title, onBgPress,modalVisible,
 */
export function OptionCheck (props) {
	const { data, checkObj, onPress, title, onBgPress, modalVisible, checkType } = props;
	const rows = data.map((item, index) => {
		const { dictKey, dictName } = item;
		const pic = ((checkObj && checkObj[checkType] && checkObj[checkType].dictKey) == dictKey) ?
			<Image source={selectedPicSourse} style={styles.optionBoxPic} /> :
			<Image source={optionPicSourse} style={styles.optionBoxPic} />;

		return (
			<TouchableOpacity key={index} style={styles.optionBoxRow} onPress={() => {
				onPress(index);
			}} activeOpacity={0.5} >
				<Text style={styles.text}>{dictName}</Text>
				{pic}
			</TouchableOpacity>
		);
	});
	return (
		<Modal animationType={"fade"}
			transparent={true}
			visible={modalVisible}
			onRequestClose={() => { }}>
			<TouchableOpacity style={styles.modalContainer} onPress={onBgPress} activeOpacity={1} >
				<View style={styles.optionBox}>
					<Text style={styles.optionBoxTitle}>{title}</Text>
					{rows}
				</View>
			</TouchableOpacity>
		</Modal>
	);
}


const styles = StyleSheet.create({
	optionBox: {
		borderRadius: 13,
		backgroundColor: '#fff',
		paddingTop: 14 * scale,
		paddingBottom: 14 * scale,
		paddingLeft: 26 * scale,
		paddingRight: 19 * scale,
		width: 302 * scale,
	},
	optionBoxRow: {
		width: '100%',
		height: 45 * scale,
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center',
	},
	optionBoxTitle: {
		fontSize: 12 * scale,
		color: '#8B8B8B',
		marginBottom: 10 * scale,
	},
	optionBoxPic: {
		height: 14 * scale,
		width: 14 * scale,
	},
	lableCell: {
		height: 36 * scale,
		justifyContent: 'center',
	},
	lableText: {
		fontSize: 12 * scale,
		color: '#8B8B8B'
	},
	modalContainer: {
		width: 375 * scale,
		height: GLOBAL.SCREEN_HEIGHT,
		backgroundColor: 'rgba(0, 0, 0, .3)',
		alignItems: 'center',
		justifyContent: 'center',
	},
	text: {
		fontSize: 13 * scale,
		color: '#404040'
	},
});